<template>
  <yd-layout style="background:#fff">
    <yd-navbar slot="navbar" title="登录" class="header" height="0.9rem" color="#fff">
      <router-link to="/" slot="left">
          <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
          <span style="transform:scale(0.8);color:#fff;line-height:12px">首页</span>
      </router-link>
    </yd-navbar>

    <section>
      <yd-tab>
        <yd-tab-panel label="账号密码登录">
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left">账号：</span>
              <yd-input slot="right" required v-model="account"
                        placeholder="邮箱/已验证手机" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">密码：</span>
              <yd-input slot="right" type="password" required v-model="pwd"
                        placeholder="请输入密码" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
          </yd-cell-group>
          <yd-button-group>
            <yd-button size="large" :disabled="disabled1" @click.native="login">登&nbsp;&nbsp;录</yd-button>
          </yd-button-group>
        </yd-tab-panel>
        <yd-tab-panel label="短信验证码登录">
          <yd-cell-group>
            <yd-cell-item>
              <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
              <input type="text" slot="right" placeholder="请输入手机号码" v-model="phone">
              <yd-sendcode slot="right" 
                          v-model="start" 
                          @click.native="sendCode" 
                          type="warning"
                          init-str="获取验证码"
              ></yd-sendcode>
            </yd-cell-item>
            <yd-cell-item>
              <yd-input slot="right" required v-model="yzm" max="20" placeholder="请输入收到的验证码" :show-error-icon="false" :show-success-icon="false"></yd-input>
            </yd-cell-item>
          </yd-cell-group>
          <yd-button-group>
            <yd-button size="large" :disabled="disabled2">登&nbsp;&nbsp;录</yd-button>
          </yd-button-group>
        </yd-tab-panel>
      </yd-tab>
      <p style="margin:0.5rem 0.24rem 0;text-align:center;font-size:14px;color:#999">
        没有账号？<router-link to="/register" style="margin:0;color:#f00">立即注册</router-link>
      </p>
    </section>
  </yd-layout>
</template>

<script>
export default {
  data(){
    return {
      start: false,
      account: '',
      pwd: '',
      phone: '',
      yzm: ''
    }
  },
  computed: {
    disabled1(){
      return !(this.account && this.pwd);
    },
    disabled2(){
      return !(this.phone && this.yzm);
    }
  },
  methods: {
    sendCode(){
      this.$dialog.loading.open('发送中...');
      setTimeout(() => {
        this.start = true;
        this.$dialog.loading.close();

        this.$dialog.toast({
          mes: '已发送',
          icon: 'success',
          timeout: 1500
        });
      }, 1000);
    },
    login(){
      let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+$/;
      let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      let pwdReg = /^[^\s]{6,20}$/;
      if(!emailReg.test(this.account) && !phoneReg.test(this.account)){
        this.$dialog.toast({icon:'error',mes:'请输入正确的邮箱或手机号',timeout: 1000});
        return;
      }
      if(!pwdReg.test(this.pwd)){
        this.$dialog.toast({icon:'error',mes:'密码长度6-20位',timeout: 1000});
        return;
      }
      this.$http.post('http://localhost:3000/user/login',{
        user: this.account,
        upwd: this.pwd
      }).then(response=>{
        let { code, msg, uid } = response.body;
        if(code>0){
          sessionStorage.uid = uid;
          sessionStorage.user = this.account;
          this.$router.push('/user');
        }else {
          this.$dialog.toast({
            mes: msg,
            timeout: 1000
          })
        }
      })
    }
  }
}
</script>

